<script setup>
import CardComponent from "@/components/CardComponent.vue";
import { ref } from "vue";
import { Plus } from '@element-plus/icons-vue'
import { manageGetAllCategory, manageAddFood, manageGetAllFoods } from "@/api/manage";
import { ElMessage } from 'element-plus'
const imageShow = ref(null)
const formValues = ref({
  name: null,
  categoryId: null,
  price: null,
  imageUrl: null,
  description: null,
  flavorName: null,
  flavorValue: []
})


const beforeAvatarUpload = (file) => {
  console.log(file);
  imageShow.value = URL.createObjectURL(file.raw)
  formValues.value.imageUrl = file.raw
}

const Allcategories = ref([])
const getAllCategory = async () => {
  const { result } = await manageGetAllCategory()
  Allcategories.value = result
  // console.log(Allcategories.value);
}
getAllCategory()

// 添加数据
const onSubmitFood = async () => {
  try {
    // 取出属性值转数组
    const flavorValue = []
    for (let i in formValues.value.flavorValue) {
      flavorValue.push(formValues.value.flavorValue[i])
    }
    // 创建formData
    const formData = new FormData()
    // 判断是否为空，不为空则添加到formData中
    if (formValues.value.price && formValues.value.price > 0) {
      formData.append('price', formValues.value.price)
    } else {
      ElMessage.error('价格不能为空或负数')
      return
    }
    if (formValues.value.name) {

      formData.append('name', formValues.value.name)
    }
    if (formValues.value.categoryId) {
      formData.append('categoryId', formValues.value.categoryId)
    }

    if (formValues.value.imageUrl) {
      formData.append('imageUrl', formValues.value.imageUrl)
    }
    if (formValues.value.description) {
      formData.append('description', formValues.value.description)
    }
    if (formValues.value.flavorName) {
      formData.append('flavorName', formValues.value.flavorName)
    }
    if (flavorValue.length > 0) {
      formData.append('flavorValue', flavorValue)
    }
    // 数据库要求菜名不能重复
    const { result } = await manageGetAllFoods()
    // 判断是否重复
    const isRepeat = result.some(item => item.name === formValues.value.name)
    if (isRepeat) {
      ElMessage.error('菜品名称重复')
      return
    }

    await manageAddFood(formData)
    getAllCategory()
    formValues.value = {
      name: null,
      categoryId: null,
      price: null,
      imageUrl: null,
      description: null,
      flavorName: null,
      flavorValue: []
    }
    ElMessage.success('添加成功')
  } catch (e) {
    ElMessage.error('请填写新增菜品信息')
  }
}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-text type="info">
          <h1>新增菜品页面</h1>
        </el-text>
      </el-header>
      <el-main>
        <CardComponent is-need-head card-height="500px" card-width="100%">
          <template #header>
            请填写新增菜品信息
          </template>
          <template #default>
            <el-form :model="formValues">
              <div class="input-title">
                <el-form-item label="菜品名称:">
                  <el-input v-model="formValues.name"></el-input>
                </el-form-item>
                <el-form-item label="菜品分类:">
                  <el-select clearable placeholder="请选择" v-model="formValues.categoryId">
                    <el-option v-for="(item, index) in Allcategories" :key="index" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="菜品价格:">
                  <el-input v-model="formValues.price"></el-input>
                </el-form-item>
              </div>
              <el-form-item label="口味做法配置:">
                <CardComponent :is-need-head=false card-height="200px" card-width="80%">
                  <div>口味名</div>
                  <div class="flavor">
                    <div><el-input placeholder="请输入类型" v-model="formValues.flavorName"></el-input></div>
                    <div><el-input-tag placeholder="请输入口味标签,按enter确认" v-model="formValues.flavorValue"></el-input-tag>
                    </div>
                    <div><el-button type="danger">删除</el-button></div>
                  </div>
                  <div><el-button type="warning">添加口味</el-button></div>
                </CardComponent>
              </el-form-item>
              <el-form-item label="菜品图片:">
                <el-upload class="avatar-uploader" :show-file-list="false" :on-change="beforeAvatarUpload"
                  :auto-upload="false">
                  <img v-if="imageShow" :src=imageShow class="avatar">
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
              <el-form-item label="菜品描述:">
                <el-input type="textarea" autosize style="width: 100%;" v-model="formValues.description"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitFood">提交</el-button>
                <el-button type="success" @click="$router.push('/management/food')">返回</el-button>
              </el-form-item>
            </el-form>
          </template>
        </CardComponent>
      </el-main>
    </el-container>

  </div>
</template>

<style scoped>
.el-header {
  background-color: rgb(248, 152, 152);
}

h1 {
  text-align: center;
  height: 100%;
  line-height: normal;
}

:deep(.el-input) {
  width: 350px;
}

:deep(.input-title .el-select) {
  width: 350px;
}

.input-title {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-input-item {
  margin-bottom: 18px;
}

.flavor {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 20px 0;
}

:deep(.flavor .el-input) {
  width: 100px;
}

:deep(.flavor .el-input-tag) {
  width: 400px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
